/**
 * 高端短剧APP设计系统
 * 目标用户：22-40岁女性
 * 风格：优雅、精致、高端
 */

// ========== 主色调 ==========
// 优雅的粉紫色调（主色）
$primary-color: #E91E63; // 玫瑰粉
$primary-color-light: #F8BBD0; // 浅粉
$primary-color-dark: #C2185B; // 深粉

// 高级金色（VIP/会员）
$vip-gold: #D4AF37; // 经典金色
$vip-gold-light: #F4E4BC; // 浅金色
$vip-gold-gradient: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF6347 100%);
$vip-rose-gold: linear-gradient(135deg, #F5C8C8 0%, #E8B4B8 50%, #D4A5A5 100%);

// 优雅紫色调（辅助色）
$secondary-color: #9C27B0; // 紫色
$secondary-color-light: #CE93D8; // 浅紫
$secondary-color-dark: #6A1B9A; // 深紫

// ========== 渐变 ==========
// 主渐变（粉紫色）
$gradient-primary: linear-gradient(135deg, #E91E63 0%, #9C27B0 50%, #673AB7 100%);
$gradient-primary-soft: linear-gradient(135deg, #F8BBD0 0%, #CE93D8 50%, #B39DDB 100%);
$gradient-primary-light: linear-gradient(135deg, #FCE4EC 0%, #F3E5F5 50%, #EDE7F6 100%);

// VIP渐变（金色玫瑰）
$gradient-vip: linear-gradient(135deg, #FFD700 0%, #FFA500 25%, #FF6B9D 50%, #C2185B 75%, #9C27B0 100%);
$gradient-vip-card: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);

// 背景渐变
$gradient-bg-light: linear-gradient(180deg, #FFFFFF 0%, #F8F4F8 100%);
$gradient-bg-dark: linear-gradient(180deg, #1a1a1a 0%, #2d1a2d 100%);

// ========== 文字颜色 ==========
$text-primary: #1A1A1A; // 主文字
$text-secondary: #666666; // 次要文字
$text-tertiary: #999999; // 辅助文字
$text-white: #FFFFFF;
$text-light: rgba(255, 255, 255, 0.9);
$text-muted: rgba(255, 255, 255, 0.6);

// ========== 背景颜色 ==========
$bg-primary: #FFFFFF;
$bg-secondary: #F8F4F8; // 浅粉灰背景
$bg-dark: #1A1A1A;
$bg-card: #FFFFFF;
$bg-card-dark: #2D2D2D;

// ========== 阴影 ==========
// 精致阴影效果
$shadow-sm: 0 2rpx 8rpx rgba(233, 30, 99, 0.08);
$shadow-md: 0 4rpx 16rpx rgba(233, 30, 99, 0.12);
$shadow-lg: 0 8rpx 32rpx rgba(233, 30, 99, 0.16);
$shadow-xl: 0 16rpx 48rpx rgba(233, 30, 99, 0.2);
$shadow-vip: 0 8rpx 32rpx rgba(212, 175, 55, 0.3);

// 内阴影（高端感）
$shadow-inner: inset 0 2rpx 4rpx rgba(0, 0, 0, 0.06);

// ========== 圆角 ==========
$radius-sm: 12rpx;
$radius-md: 20rpx;
$radius-lg: 32rpx;
$radius-xl: 48rpx;
$radius-full: 9999rpx;

// ========== 间距 ==========
$spacing-xs: 8rpx;
$spacing-sm: 16rpx;
$spacing-md: 24rpx;
$spacing-lg: 32rpx;
$spacing-xl: 48rpx;
$spacing-2xl: 64rpx;

// ========== 字体 ==========
$font-size-xs: 20rpx;
$font-size-sm: 24rpx;
$font-size-base: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;
$font-size-2xl: 40rpx;
$font-size-3xl: 48rpx;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-semibold: 600;
$font-weight-bold: 700;
$font-weight-extrabold: 900;

// ========== 动画 ==========
$transition-fast: 0.2s ease;
$transition-base: 0.3s ease;
$transition-slow: 0.5s ease;

// ========== 混合器 ==========
// 卡片样式
@mixin card-style {
  background: $bg-card;
  border-radius: $radius-lg;
  box-shadow: $shadow-md;
  padding: $spacing-lg;
}

// 卡片样式（深色）
@mixin card-style-dark {
  background: $bg-card-dark;
  border-radius: $radius-lg;
  box-shadow: $shadow-lg;
  padding: $spacing-lg;
}

// VIP卡片样式
@mixin vip-card-style {
  background: $gradient-vip-card;
  border-radius: $radius-lg;
  box-shadow: $shadow-vip;
  border: 2rpx solid transparent;
  background-image: linear-gradient($bg-card-dark, $bg-card-dark), $gradient-vip;
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

// 按钮样式（主要）
@mixin button-primary {
  background: $gradient-primary;
  color: $text-white;
  border-radius: $radius-full;
  box-shadow: $shadow-md;
  font-weight: $font-weight-semibold;
  transition: all $transition-base;
  
  &:active {
    transform: scale(0.98);
    box-shadow: $shadow-sm;
  }
}

// 按钮样式（VIP）
@mixin button-vip {
  background: $gradient-vip;
  color: $text-white;
  border-radius: $radius-full;
  box-shadow: $shadow-vip;
  font-weight: $font-weight-bold;
  transition: all $transition-base;
  
  &:active {
    transform: scale(0.98);
    box-shadow: $shadow-lg;
  }
}

// 文字渐变
@mixin text-gradient {
  background: $gradient-primary;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// VIP文字渐变
@mixin text-gradient-vip {
  background: $gradient-vip;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

// 玻璃态效果
@mixin glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20rpx);
  -webkit-backdrop-filter: blur(20rpx);
  border: 1rpx solid rgba(255, 255, 255, 0.2);
}

// 优雅的hover效果
@mixin hover-lift {
  transition: all $transition-base;
  
  &:active {
    transform: translateY(-2rpx);
    box-shadow: $shadow-lg;
  }
}

